<template>
  <!-- checkedRowKeys多选 -->
  <!-- columns表头 -->
  <!-- data数据 -->
  <!-- pagination分页 -->
  <!-- remote表格是否自动分页数据，在异步的状况下你可能需要把它设为 true -->
  <!-- stripe斑马线 -->
  <n-data-table
    :columns="props.columns"
    :data="paginatedData"
    :pagination="props.isPagination ? pagination : false"
    remote
    striped
    v-bind="$attrs"
  />
</template>

<script
  setup
  lang="ts"
  generic="U extends { [x: string]: any }, I extends { [x: string]: any }, S extends { [x: string]: any }"
>
import { DataTableColumns, PaginationInfo, PaginationProps } from 'naive-ui'
import { useI18n } from 'vue-i18n'

import { SearchDto } from '@/types/dto'
import { PaginatedResponse } from '@/types/interface'

// 定义接收的 props
interface Props {
  columns: DataTableColumns<U>
  data: PaginatedResponse<I> | I
  search: SearchDto<S> | S
  isPagination?: boolean
}

// 添加props 默认参数
const props = withDefaults(defineProps<Props>(), {
  isPagination: true,
})

// 动态获取数据列表或分页数据
const paginatedData = computed(() => {
  return 'list' in props.data ? props.data.list : props.data
})

const { t } = useI18n()

// 定义 emit 事件用于同步 checkedRowKeys
const emit = defineEmits<{
  (
    e: 'update:search',
    search: {
      page?: number
      pageSize?: number
    },
  ): void
}>()

const pagination = computed<PaginationProps>(() => ({
  prefix: (info: PaginationInfo) => t('common.itemCount', { itemCount: info.itemCount }),
  page: props.search.page ?? 1, // 确保 page 是 number 类型
  pageSize: props.search.pageSize ?? 10, // 确保 pageSize 是 number 类型
  itemCount: props.data.total ?? 0,
  pageSizes: [10, 20, 30, 40],
  showSizePicker: true,
  onChange: (page: number) => {
    emit('update:search', { page })
    console.log('page 改变', page)
  },
  onUpdatePageSize: (pageSize: number) => {
    emit('update:search', { pageSize, page: 1 })
    console.log('pageSize 改变', pageSize)
    console.log('page 改变1')
  },
}))
</script>

<style scoped lang="less">
//
</style>
